import React, { Component } from 'react'
import { connect } from "react-redux";
import { CSSTransition } from "react-transition-group";
import {Link} from "react-router-dom";
import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  NavSearch,
  Addition,
  Button,
  SearchWrapper,
  SearchInfo,
  SearchInfoTitle,
  SearchInfoSwitch,
  SearchInfoItem,
  SearchInfoList
} from "./style";
import { actionCreators } from './store'
import { actionCreators as loginActionCreators } from '../../pages/login/store'

class Header extends Component{
  getListArea() {
    const { focus, mouseEnter, page, totalPage, list, handleMouseEnter, handleMouseLeave, handleChangePage }  = this.props
    const jsList = list.toJS()
    const pageList = []
    if ( jsList.length) {
      for (let i = ((page -1)* 5); i< page *5;i++) {
        pageList.push(
          <SearchInfoItem key={jsList[i]}>{jsList[i]}</SearchInfoItem>
        )
      }
    }
    if(focus || mouseEnter) {
      return (
        <SearchInfo
          onMouseEnter={() =>{handleMouseEnter()}}
          onMouseLeave={() => {handleMouseLeave()}}
        >
          <SearchInfoTitle>
            热门搜索
            <SearchInfoSwitch onClick={() => handleChangePage(page, totalPage, this.spinIcon)}>
              <i ref={(icon) => {this.spinIcon = icon}} className='iconfont spin'>&#xe606;</i> 换一批
            </SearchInfoSwitch>
          </SearchInfoTitle>
          <SearchInfoList>
            {
              pageList
            }
          </SearchInfoList>
        </SearchInfo>
      )
    } else {
      return null
    }
  }
  render() {
    return (
      <HeaderWrapper>
        <Link to='/'><Logo /></Link>
        <Nav>
          <NavItem className='left active'>首页</NavItem>
          <NavItem className='left'>下载App</NavItem>
          {
            this.props.login ?
              <NavItem className='right' onClick={this.props.logout}>退出</NavItem> :
              <Link to='/login'>
                <NavItem className='right'>登录</NavItem>
              </Link>
          }
          <NavItem className='right'><i className='iconfont'>&#xe636;</i></NavItem>
          <SearchWrapper>
            <CSSTransition
              in={this.props.focus}
              timeout={200}
              classNames='slide'
            >
              <NavSearch
                className={this.props.focus ? 'focused' : ''}
                onFocus={ () => this.props.handleInputFocus(this.props.list)}
                onBlur={this.props.handleInputBlur}
              />
            </CSSTransition>
            <i className={this.props.focus ? 'focused iconfont zoom' : 'iconfont zoom'}>&#xe637;</i>
            {
              this.getListArea()
            }
          </SearchWrapper>
        </Nav>
        <Addition>
          <Link to='/write'>
            <Button className='write'><i className='iconfont'>&#xe6b3;</i>写文章</Button>
          </Link>
          <Button className='reg'>注册</Button>
        </Addition>
      </HeaderWrapper>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    focus: state.getIn(['header','focus']),
    list: state.getIn(['header', 'list']),
    page: state.getIn(['header', 'page']),
    totalPage: state.getIn(['header', 'totalPage']),
    mouseEnter: state.getIn(['header', 'mouseEnter']),
    login: state.getIn(['login', 'login'])
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    handleInputFocus(list) {
      if (!list.size)
        dispatch(actionCreators.getList())
      dispatch(actionCreators.searchFocus())
    },
    handleInputBlur() {
      dispatch(actionCreators.searchBlur())
    },
    handleMouseEnter() {
      dispatch(actionCreators.mouseEnter())
    },
    handleMouseLeave() {
      dispatch(actionCreators.mouseLeave())
    },
    handleChangePage(page, totalPage, spin) {
      let originAngle = spin.style.transform.replace(/[^0-9]/ig, '');
      originAngle = originAngle ? parseInt(originAngle, 10) : 0;
      spin.style.transform = `rotate(${originAngle+360}deg)`;
      if (page < totalPage)
        dispatch(actionCreators.changePage(page +1))
      else
        dispatch(actionCreators.changePage(1))
    },
    logout() {
      dispatch(loginActionCreators.logout())
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Header)
